<template>
  <div class="home-nav">
    <ul class="area" v-if="home.nav && home.nav.data">
      <li
        v-for="(item, index) in home.nav.data"
        :key="index"
        class="area-item"
        :class="{'more': +home.nav.total === 5}"
        @click="handleClick(item)">
        <span class="image" v-if="item.image && item.image.path" >
          <img :src="item.image.path"/>
        </span>
        <span class="name">{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeNav',
  props: ['home'],
  data() {
    return {
    }
  },
  methods: {
    handleClick(item) {
      const url = item.wx_url
      if (url && url.length > 0) {
        this.$router.push(url)
      }
    }
  },
  created () {
    // console.log(this.home.nav.total)
  }
}
</script>

<style scoped lang="stylus">
.home-nav
  margin 10px
  .area
    display flex
    flex-wrap wrap
    background white
    //margin-bottom 10px
    border-radius 5px
    padding 10px
    .area-item
      &.more
        // 每行排5个
        width 20%
      // 每行排4个
      width 25%
      margin-bottom 5px
      //background red
      display flex
      flex-direction column
      justify-content space-between
      .image
        padding 25px
        // 控制高度
        flex 1
        //img
        //  border-radius 50%
      .name
        //color $main_color
        font-size 14px
        color #000
        font-weight 700
        height 30px
        line-height 30px
        margin-top -10px

</style>
